

<template>
    <ProFormDrawer v-model:visible="visible" clickOkClose title="编辑">
        <ProForm :columns="formColumns" :span="24" :btn-position="'center'" :display-expend="false" @ok="submit">
        </ProForm>
    </ProFormDrawer>

    <ProFormDrawer v-model:visible="visible2" clickOkClose title="编辑">
        <ProForm :columns="formColumns" :span="24" :btn-position="'center'" :display-expend="false" @ok="submit">
            <template #suffix-btn="{ close }">
                <ElButton @click="close()">关闭</ElButton>
            </template>
        </ProForm>
    </ProFormDrawer>
    <ElSpace>
        <ElButton @click="visible = true">打开抽屉</ElButton>
        <ElButton @click="visible2 = true">打开抽屉 自定义关闭按钮</ElButton>
    </ElSpace>
</template>
<script setup lang="ts">
import 'element-plus/dist/index.css'
import { createProForm, ProForm, ProFormDrawer } from '@howuse/element-plus-form'
import { ElButton, ElMessage, ElSpace } from 'element-plus';
import { ref } from 'vue';

const visible = ref(false)
const visible2 = ref(false)

const { formColumns } = createProForm([
    {
        label: "姓名",
        key: "name",
        value: "",
        is: "ElInput",
    },
    {
        label: "年龄",
        key: "age",
        value: "",
        is: "ElInput",
    },
])


function submit(raw) {
    ElMessage.success(JSON.stringify(raw))
}
</script>